<template>
  <div class="qw">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="工单编号:">
        <el-input v-model="formInline.user" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="工单状态:">
        <el-select v-model="formInline.region" placeholder="请选择">
          <el-option
            v-for="item in getskList"
            :key="item.statusId"
            :label="item.statusName"
            :value="item.statusName"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 新建工单 工单配置 -->
    <el-card class="box-card2">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="addFn"
      >新建</el-button>
      <el-button type="info">工单配置</el-button>
      <!-- table 组件 -->
      <div>
        <el-table :data="searchList" stripe style="width: 100%">
          <el-table-column type="index" label="序号" align="center" />
          <el-table-column prop="taskCode" label="工单编号" align="center" />
          <el-table-column prop="innerCode" label="设备编号" align="center" />
          <el-table-column label="工单类型" align="center">
            <template #default="{ row }">
              {{ taskMap[+row.taskType.typeId] }}
            </template>
          </el-table-column>
          <el-table-column label="工单方式" align="center">
            <template #default="{ row }">
              {{ taskType[row.createType] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="taskStatusTypeEntity.statusName"
            label="工单状态"
            align="center"
          />
          <el-table-column prop="userName" label="运营人员" align="center" />
          <el-table-column label="创建日期" align="center">
            <template #default="{ row }">
              {{ formDate(row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template #default="{ row }">
              <el-button
                type="text"
                size="small"
                @click="handleClick"
              >查看详情</el-button>
              <!-- 补货弹窗 -->
              <Look :dialog-visible="dialogVisible" :look-data="row" @closeLook="dialogVisible=false"/>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <el-row type="flex" align="left" justify="left" style="height: 60px">
        <el-pagination
          :current-page="TaskForm.pageIndex"
          :page-size="TaskForm.pageSize"
          layout="prev, pager, next"
          :total="totalCount"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <!-- 新建的弹窗 -->
    <div>
      <el-dialog
        title="新增工单"
        :visible="visibleShow"
        width="40%"
        @close="dialogClose"
        @open="dialogOpen"
      >
        <!-- 表单内容 -->
        <el-form
          ref="roleRef"
          :model="roleForm"
          :rules="roleRules"
          label-width="120px"
        >
          <el-form-item label="设备编号：" prop="innerCode">
            <el-input v-model="roleForm.innerCode" @input="changeFn" />
          </el-form-item>
          <el-form-item label="工单类型：" prop="productType">
            <el-select
              v-model="roleForm.productType"
              style="width: 455px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in typeList"
                :key="item.typeId"
                multiple
                filterable
                allow-create
                :label="item.typeName"
                :value="item.typeName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="补货数量：">
            <span class="el-icon-edit-outline bog" />
            <el-button
              type="text"
              class="little"
              @click="addDetail"
            >补货清单</el-button>
          </el-form-item>
          <el-form-item label="运营人员：" prop="userName">
            <el-select
              v-model="roleForm.userName"
              style="width: 455px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in lis"
                :key="item.userId"
                :label="item.userName"
                :value="item.userName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="备注：" prop="desc">
            <el-input
              v-model="roleForm.desc"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogClose">取 消</el-button>
          <el-button
            type="primary"
            @click="dialogVisible = false"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 补货清单弹窗 -->
    <div>
      <el-dialog
        title="补货详情"
        :visible="detailsDialog.detailsVisible"
        width="45%"
        @close="detailsDialog.detailsVisible = false"
      >
        <div style="height: 380px" class="scrollbar">
          <el-scrollbar style="height: 100%">
            <!-- 表格 -->
            <el-table
              :data="detailsDialog.list"
              style="width: 98%"
              :header-cell-style="{
                fontWeight: 'normal',
                background: '#f3f6fb',
              }"
            >
              <el-table-column label="货到编号" prop="channelCode" />
              <el-table-column label="商品名称" prop="sku.skuName" />
              <el-table-column label="当前数量" prop="currentCapacity" />
              <el-table-column label="还可添加" prop="maxCapacity" />
              <el-table-column label="补满数量" width="200">
                <template #default="{ row }">
                  <el-input-number
                    v-if="row.sku !== null"
                    v-model="row.expectCapacity"
                    controls-position="right"
                    :min="row.min"
                    :max="row.max"
                    class="expectCapacity"
                  />
                  <p v-else>货道暂无商品</p>
                </template>
              </el-table-column>
            </el-table>
          </el-scrollbar>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button
            class="cancel"
            @click="detailsDialog.detailsVisible = false"
          >取 消</el-button>
          <el-button
            type="primary"
            class="sure"
            @click="detailsDialogFn"
          >确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import Look from '@/components/Look'
import { getTask, searchTask, taskTypeAll, userList, detailInfo } from '@/api'
export default {
  components: {
    Look
  },
  data() {
    return {
      roleForm: {
        innerCode: '', // 设备编号
        productType: '', // 工单类型
        userName: '',
        desc: '',
        userId: 0,
        createType: 1,
        details: {
          channelCode: '',
          expectCapacity: 3,
          skuId: '',
          skuName: '',
          skuImage: ''
        }
      },
      detailsDialog: {
        detailsVisible: false, // 控制显示
        // 弹窗表格里的数据
        list: []
      },
      roleRules: {
        // 校验规则
        innerCode: [{ required: true, trigger: 'blur' }],
        productType: [{ required: true, trigger: 'blur' }]
      },
      taskMap: {
        // 工单类型枚举
        1: '投放工单',
        2: '补货工单',
        3: '维修工单',
        4: '撤机工单'
      },
      taskType: {
        // 工单方式枚举
        0: '自动',
        1: '手动'
      },
      lis: [], // 运营人员
      typeList: [], // 所有工单类型
      getskList: [], // 工单状态
      searchList: [], // 工单搜索
      formInline: { // 表单数据
        user: '',
        region: ''
      },
      totalCount: 0,
      // 工单搜索的参数
      TaskForm: {
        pageIndex: 1,
        pageSize: 10,
        isRepair: false
      },
      // // 分页器参数
      // pageOption: {
      //   pageIndex: 1,
      //   pageSize: 10
      // },
      // 新建弹窗的变量
      visibleShow: false,
      dialogVisible: false
    }
  },
  async created() {
    // 所有工单类型
    const res2 = await taskTypeAll()
    this.typeList = res2.data
    console.log(res2)
    // 工单状态
    const res = await getTask()
    this.getskList = res.data
    // 工单搜索
    this.fetchTaskList()
  },
  methods: {
    // 格式化时间
    formDate(value) {
      return dayjs(value).format('YYYY-MM-DD')
    },
    // 刷新页面的方法
    async fetchTaskList() {
      const res1 = await searchTask(this.TaskForm)
      console.log(res1)
      this.searchList = res1.data.currentPageRecords
      this.totalCount = +res1.data.totalCount
    },
    handleCurrentChange(val) {
      this.TaskForm.pageIndex = val
      this.fetchTaskList()
    },
    // 输入框事件
    async changeFn() {
      const res = await userList(this.roleForm.innerCode)
      this.lis = res.data
    },
    addFn() {
      // 点击打开弹窗
      this.visibleShow = true
    },
    // 打开弹窗的回调
    async dialogOpen() {},
    // 关闭弹窗
    dialogClose() {
      this.visibleShow = false
    },
    // 补货详情弹窗
    async addDetail() {
      if (this.roleForm.innerCode) {
        this.detailsDialog.detailsVisible = true
        const res = await detailInfo(this.roleForm.innerCode)
        console.log(res)
        // 数组判断重新赋值
        this.detailsDialog.list = res.data.map((item) => {
          this.$set(item, 'min', 0)
          this.$set(item, 'max', item.maxCapacity - item.currentCapacity)
          item.expectCapacity = item.maxCapacity - item.currentCapacity
          item.maxCapacity = item.maxCapacity - item.currentCapacity >= 0
            ? item.maxCapacity - item.currentCapacity : 0
          if (item.sku === null) {
            item.currentCapacity = '-'
            item.expectCapacity = '货道暂无商品'
            item.maxCapacity = '-'
          }
          return item
        })
      }
    },
    detailsDialogFn() { // 提交表单

    },
    handleClick() {
      this.dialogVisible = true
    }
  }
}
</script>

<style>
.qw {
  margin-top: 70px;
  margin-left: 20px;
  margin-right: 10px;
}
.box-card {
  padding-right: 200px;
}
.box-card2 {
  margin-top: 20px;
}
/*  表格样式 */
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.little {
  font-size: 14px;
}
.bog {
  color: blueviolet;
  padding-right: 5px;
}
</style>
